<template>
  <div class="view flex-row p-l-15 p-r-15">
    <!-- 风控树信息 -->
    <div class="m-t-20">
      <el-card
        shadow="never"
        border
        class="m-r-25 minw200 rel"
        style="height: 530px"
      >
        <div style="text-align: right; margin-bottom: 15px">
          <el-button type="primary" plain @click="showAddTemp = true">
            + 模板
          </el-button>
        </div>
        <tree
          :nodes="nodes"
          class="height100"
          :setting="setting"
          @onClick="selectTree"
          @onCreated="handleCreated"
        />
      </el-card>
    </div>
    <el-tabs
      tab-position="left"
      type="border-card"
      v-model="activeName"
      @tab-click="changeTab"
      class="m-t-20 m-b-20 width100"
    >
      <el-tab-pane label="可模拟交易品种/合约" name="0">
        <div>
          <el-button
            icon="el-icon-plus"
            type="primary"
            style="margin-bottom: 12px"
            @click="handleEdit"
          >
            新增
          </el-button>
          <risk-table
            :list="dataList"
            :activeName="activeName"
            :loading="listLoading"
            @handleEdit="handleEdit"
            @handleDelete="handleDelete"
          ></risk-table>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="模拟交易方向" name="1">
        <risk-table :list="dataList" :loading="listLoading"></risk-table>
      </el-tab-pane> -->
      <el-tab-pane label="模拟交易数量" name="1">
        <el-button
          icon="el-icon-plus"
          type="primary"
          style="margin-bottom: 12px"
          @click="handleEdit"
        >
          新增
        </el-button>
        <risk-table
          :activeName="activeName"
          :list="dataList"
          @handleEdit="handleEdit"
          @handleDelete="handleDelete"
          :loading="listLoading"
        ></risk-table>
      </el-tab-pane>
      <!-- <el-tab-pane label="不活跃合约">定时任务补偿</el-tab-pane> -->
      <el-tab-pane label="风险度" name="2">
        <el-button
          icon="el-icon-plus"
          type="primary"
          style="margin-bottom: 12px"
          @click="handleEdit"
        >
          新增
        </el-button>
        <risk-table
          :activeName="activeName"
          :list="dataList"
          @handleEdit="handleEdit"
          @handleDelete="handleDelete"
          :loading="listLoading"
        ></risk-table>
      </el-tab-pane>
      <el-tab-pane label="权益" name="3">
        <el-button
          icon="el-icon-plus"
          type="primary"
          style="margin-bottom: 12px"
          @click="handleEdit"
        >
          新增
        </el-button>
        <risk-table
          :activeName="activeName"
          :list="dataList"
          @handleEdit="handleEdit"
          @handleDelete="handleDelete"
          :loading="listLoading"
        ></risk-table>
      </el-tab-pane>
      <!-- <el-tab-pane label="亏损">定时任务补偿</el-tab-pane> -->
      <el-tab-pane label="保证金" name="4">
        <el-button
          icon="el-icon-plus"
          type="primary"
          style="margin-bottom: 12px"
          @click="handleEdit"
        >
          新增
        </el-button>
        <risk-table
          :activeName="activeName"
          :list="dataList"
          @handleEdit="handleEdit"
          @handleDelete="handleDelete"
          :loading="listLoading"
        ></risk-table>
      </el-tab-pane>
      <el-tab-pane label="强平" name="5">
        <el-button
          icon="el-icon-plus"
          type="primary"
          style="margin-bottom: 12px"
          @click="handleEdit"
        >
          新增
        </el-button>
        <risk-table
          :activeName="activeName"
          :list="dataList"
          @handleEdit="handleEdit"
          @handleDelete="handleDelete"
          :loading="listLoading"
        ></risk-table>
      </el-tab-pane>
      <!-- <el-tab-pane label="定时强平" name="6">
        <risk-table :list="dataList" :loading="listLoading"></risk-table>
      </el-tab-pane> -->
      <!-- <el-tab-pane label="持仓数量">定时任务补偿</el-tab-pane> -->
    </el-tabs>

    <el-dialog title="风控模板" :visible.sync="showAddTemp" width="30%">
      <div>
        <div class="view flex-row align-center m-b-20">
          <div class="w80">名称：</div>
          <el-input
            placeholder="请输入名称"
            v-model="info.mname"
            clearable
          ></el-input>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addHandle" :loading="addLoading">
          确 定
        </el-button>
      </span>
    </el-dialog>

    <edit ref="edit0" @fetch-data="getAllList"></edit>
    <edit1 ref="edit1" @fetch-data="getAllList"></edit1>
    <edit2 ref="edit2" @fetch-data="getAllList"></edit2>
    <edit3 ref="edit3" @fetch-data="getAllList"></edit3>
    <edit4 ref="edit4" @fetch-data="getAllList"></edit4>
    <edit5 ref="edit5" @fetch-data="getAllList"></edit5>
  </div>
</template>
<script>
  import tree from 'vue-giant-tree'
  import riskTable from './components/table'
  import edit from './components/edit'
  import edit1 from './components/edit1'
  import edit2 from './components/edit2'
  import edit3 from './components/edit3'
  import edit4 from './components/edit4'
  import edit5 from './components/edit5'
  import $ from 'jquery'
  import {
    getWclist,
    addwc,
    editwc,
    delwc,
    eclist,
    olist,
    risklist,
    marginlist,
    equitlist,
    qplist,
    getec,
    delec,
    getol,
    getrisk,
    getequit,
    delol,
    delrisk,
    delmargin,
    delequit,
    getqp,
    delqp,
    getmargin,
  } from '@/api/userManagement'
  export default {
    components: {
      riskTable,
      tree,
      edit,
      edit1,
      edit2,
      edit3,
      edit4,
      edit5,
    },
    data() {
      return {
        activeName: '0',
        addLoading: false,
        listLoading: false,
        showAddTemp: false,
        ztreeObj: null,
        info: {},
        setting: {
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: false,
            addHoverDom: this.addHoverDom,
            removeHoverDom: this.removeHoverDom,
          },
        },
        fkList: [],
        nodes: [], // 风控树节点
        mid: '',
        dataList: [],
        list0: [],
        list1: [],
        list2: [],
        list3: [],
        list4: [],
        list5: [],
        list6: [],
      }
    },
    created() {
      this.geFKList()
    },
    methods: {
      selectTree() {
        let node = this.ztreeObj.getSelectedNodes()[0]
        this.mid = node.id
        this.getAllList()
      },
      changeTab() {
        this.getAllList()
      },
      async getAllList() {
        this.listLoading = true
        const res = await Promise.all([
          eclist({ mid: this.mid }),
          olist({ mid: this.mid }),
          risklist({ mid: this.mid }),
          equitlist({ mid: this.mid }),
          marginlist({ mid: this.mid }),
          qplist({ mid: this.mid }),
        ])
        this.listLoading = false
        this.dataList = res[Number(this.activeName)].data
      },
      // 可模拟交易品种/合约
      // 模拟交易数量
      // 风险度
      // 保证金
      // 强平
      // 定时强平
      cancel() {
        this.info = {}
        this.showAddTemp = false
      },
      addHandle() {
        if (!this.info.mname) {
          this.$message('请输入模板名称')
          return false
        }
        if (this.info.mid) {
          this.addLoading = true
          editwc(this.info)
            .then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.showAddTemp = false
              this.addLoading = false
              this.info = {}
              this.geFKList()
            })
            .catch((ret) => {
              this.addLoading = false
              this.$message(ret.msg)
            })
        } else {
          this.addLoading = true
          addwc({ mname: this.info.mname })
            .then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.showAddTemp = false
              this.addLoading = false
              this.info = {}
              this.geFKList()
            })
            .catch((ret) => {
              this.addLoading = false
              this.$message(ret.msg)
            })
        }
      },
      geFKList() {
        getWclist({})
          .then((res) => {
            this.fkList = res.data
            this.nodes = res.data.map((item, index) => {
              let datac = {}
              if (index == 0) {
                datac.pid = 0
                datac.open = true
              }
              datac.id = item.id
              datac.name = item.name
              return datac
            })
          })
          .catch((ret) => {
            this.$message({
              type: 'error',
              message: ret.msg,
            })
          })
      },

      addHoverDom(treeid, treeNode) {
        const item = document.getElementById(`${treeNode.tId}_a`)
        if (
          item &&
          !item.querySelector('.tree_extra_btn') &&
          treeNode.name !== '默认'
        ) {
          const btn = document.createElement('sapn')
          btn.id = `${treeid}_${treeNode.id}_btn`
          btn.classList.add('tree_extra_btn')
          btn.innerText = '删除'

          const btn1 = document.createElement('sapn')
          btn1.id = `${treeid}_${treeNode.id}_btn_1`
          btn1.classList.add('m-r-15')
          btn1.classList.add('tree_extra_btn_1')
          btn1.innerText = '编辑'

          btn1.addEventListener('click', (e) => {
            e.stopPropagation()
            this.clickEdit(treeNode)
          })

          btn.addEventListener('click', (e) => {
            e.stopPropagation()
            this.clickRemove(treeNode)
          })

          item.appendChild(btn1)

          item.appendChild(btn)
        }
      },
      clickEdit(info) {
        let infoc = this.fkList.find((item) => item.id == info.id)
        this.info.mid = infoc.id
        this.info.mname = infoc.name
        this.showAddTemp = true
      },
      removeHoverDom(treeid, treeNode) {
        const item = document.getElementById(`${treeNode.tId}_a`)
        if (item) {
          const btn = item.querySelector('.tree_extra_btn')
          if (btn) {
            item.removeChild(btn)
          }
          const btn1 = item.querySelector('.tree_extra_btn_1')
          if (btn1) {
            item.removeChild(btn1)
          }
        }
      },
      clickRemove(treeNode) {
        this.ztreeObj && this.ztreeObj.removeNode(treeNode)
        delwc({ mid: treeNode.id })
          .then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.geFKList()
          })
          .catch((ret) => {
            this.$Message(ret.msg)
          })
      },
      handleCreated: function (ztreeObj) {
        this.ztreeObj = ztreeObj
        if (this.ztreeObj.getNodes()[0]) {
          this.ztreeObj.expandNode(this.ztreeObj.getNodes()[0], true)
          this.ztreeObj.selectNode(this.ztreeObj.getNodes()[0], true)
          this.mid = this.ztreeObj.getNodes()[0].id
          this.getAllList()
        }
      },
      handleDelete(row) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          if (this.activeName == 0) {
            const { msg } = await delec({ ecid: row.id })
            this.$baseMessage(msg, 'success')
          } else if (this.activeName == 1) {
            const { msg } = await delol({ olid: row.id })
            this.$baseMessage(msg, 'success')
          } else if (this.activeName == 2) {
            const { msg } = await delrisk({ rkid: row.id })
            this.$baseMessage(msg, 'success')
          } else if (this.activeName == 3) {
            const { msg } = await delequit({ elid: row.id })
            this.$baseMessage(msg, 'success')
          } else if (this.activeName == 4) {
            const { msg } = await delmargin({ mlid: row.id })
            this.$baseMessage(msg, 'success')
          } else if (this.activeName == 5) {
            const { msg } = await delqp({ mcid: row.id })
            this.$baseMessage(msg, 'success')
          }

          this.getAllList()
        })
      },
      handleEdit(row) {
        if (row.id) {
          if (this.activeName == 0) {
            getec({ mid: this.mid, ecid: row.id }).then((res) => {
              this.$refs[`edit${this.activeName}`].showEdit(res.data)
            })
          } else if (this.activeName == 1) {
            getol({ mid: this.mid, olid: row.id }).then((res) => {
              this.$refs[`edit${this.activeName}`].showEdit(res.data)
            })
          } else if (this.activeName == 2) {
            getrisk({ mid: this.mid, rkid: row.id }).then((res) => {
              this.$refs[`edit${this.activeName}`].showEdit(res.data)
            })
          } else if (this.activeName == 3) {
            getequit({ mid: this.mid, elid: row.id }).then((res) => {
              this.$refs[`edit${this.activeName}`].showEdit(res.data)
            })
          } else if (this.activeName == 4) {
            getmargin({ mid: this.mid, mlid: row.id }).then((res) => {
              this.$refs[`edit${this.activeName}`].showEdit(res.data)
            })
          } else if (this.activeName == 5) {
            getqp({ mid: this.mid, mcid: row.id }).then((res) => {
              this.$refs[`edit${this.activeName}`].showEdit(res.data)
            })
          }
        } else {
          let node = this.ztreeObj.getSelectedNodes()
          if (node.length == 0) {
            this.$alert('请先选择模板')
            return
          }
          this.$refs[`edit${this.activeName}`].showEdit({
            mid: node[0].id,
          })
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .minw200 {
    min-width: 200px;
  }
</style>
